<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>model</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-24 -->
	<style type="text/css">
		.bgc {
			background: #f00;
			color: #fff;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			// closest就是向上找，如果自己满足就返回，如果自己不满足，继续向上走
			// $("#ll").closest("ul").css("color","#f00");
			// 由于closest可以从自己找，所以closest非常适合做事件委派
			// $("#ll").closest("li").css("color","#0f0");
			/**
			 * 事件委托的原理
			 * 此时每一个事件只要被点击到，他都会冒泡到document去
			 * 所以以下事件会被处理
			 * 在处理时，判断一下该事件是否是我要处理的对象就可以了
			 */
			$(document).bind("click",function(event){
				var obj = $(event.target).closest(".ccc");
				if(obj[0]==event.target) {
					alert("abc");
				}
			});
			/*
			 * 对于live而言就是使用事件委派的方式，但是使用这个方式会带来如下问题
			 * 1.每个事件都会冒泡到document上去，开销变大
			 * 2.使用live不支持一些特殊的事件
			 * 对于live方法而言，他提供了第二个参数来实现了绑定上下文
			 */
			$("#content").append("<div class='ccc'>bbbb</div>");
			$("#abc").append("<div class='ccc'>bbbb</div>");
			
			function print(txt) {
				$("#content").append(txt+"</br>");
			}
		});
	</script> 
</head>
<body id="body">
	<div id="content">
		<div class="ccc">aaaaa</div>
		<ul>
			<li>bcd</li>
			<li>
				<ul>
					<li>ddddd</li>
					<li id="ll">abcc</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="abc">abc</div>
</body>
</html>

